<script lang="ts" setup>
const value = ref<number>(4.5)
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
  value: {
    type: Object,
    required: true,
  },
})
const goToCourseDetail =()=>{
  router.push('/search-details')
}
console.log("props:",props.value);

</script>

<template>
  <div class="collect">
    <div class="collect-content" @click="goToCourseDetail" v-if="props.value">
      <img class="collect-content-img" :src="props.value.url" alt="图片加载失败" />
      <p class="collect-content-p">
        {{ props.value.name }}
      </p>
      <div class="collect-content-rate">
        <div>
          <span class="collect-content-rate-fraction">{{ value }}</span>
          <a-rate v-model:value="value" disabled />
        </div>
        <div>
          <span class="collect-content-rate-lecturer">{{ props.value.lecturer }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.collect {
  display: flex; /* 确保子元素在一行展示 */
  justify-content: space-around;
  width: 100%;
  height: 100%;
  overflow-y: hidden;

  &-content {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 使图片、文本、评分排列在列中 */
    align-items: center; /* 可选：居中对齐元素 */
    padding: 12px;
    margin: $educ-whole;
    cursor: pointer;
    background-color: white;
    border-radius: $educ-whole;

    &-img {
      width: 100%;
      height: 180px;
    }

    &-p {
      margin-top: $educ-whole;
      font-size: 17px;
    }

    &-rate {
      display: flex;
      justify-content: space-between;
      width: 100%; /* 确保评分区域宽度填满 */
      &-fraction {
        padding-right: 15px;
      }

      &-lecturer {
        font-size: 12px;
      }
    }
  }
}
</style>
